<template>
	<view>
		<view class="">
			<view
				style="width: 750rpx; background: linear-gradient(180deg,#5A53CE, #5A53CE);display: inline-block;">


<view class="u-padding-20" style="color: #fff;font-weight: bold;font-size: 34rpx;">我的卡券</view>
				<view class="block" v-for="(item,index) in list" :key="index">

					<view style="height:120rpx;">
						<view class="u-font-weight u-font-34">{{item.cardName}}</view>
						<!-- <view class="u-flex u-row-between u-font-24 u-margin-top-10">
							<view>￥{{item.price}}</view>
							<view>购买后限时{{item.freeTime}}分钟</view>
						</view> -->
					</view>
					
					
					<view @click="buy(item)" class="u-text-center  u-padding-10" style="border-top: 1rpx dashed #ffff;">立即使用</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				
				
			}
		},
		props:{
			list:{
				type:Array,
				default:()=>[]
			}
		},
		methods:{
			buy(item){
				this.$emit('useCard',item)
			},
			
		},
		onLoad(options) {
			
		}

	}
</script>
<style scoped>
	.block {
		background: linear-gradient(to left, #658EF9, #918DFF);
		width: 700rpx;
		margin: 20rpx auto;
		border-radius: 20rpx;
		position: relative;
		padding: 30rpx;
		height: 220rpx;
		color: #ffff;
	}

	.block::after {
		content: '';
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		left: -25rpx;
		overflow: hidden;
		bottom: 40rpx;
		background: #5A53CE;
		border-radius: 100%;
		z-index: 99;
	}

	.block::before {
		content: '';
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		right: -25rpx;
		overflow: hidden;
		bottom: 40rpx;
		background: #5A53CE;
		border-radius: 100%;
		z-index: 99;
	}
</style>